@orange: #ee9945;
.class {
  height: 100%;
  .panel-item {
    height: 100%;
    overflow: hidden;
    &:nth-child(1) {
      width: 70%;
      margin: 0 2% 0 0;
      display: flex;
      flex-direction: column;
      & > div {
        flex: 1;

        display: flex;
        & > div {
          background: #fff;
          padding: 3rem;
        }
        .profile {
          flex: 1;
          margin-right: 1rem;
          .title {
            margin-bottom: 1rem;
            font-size: 3.5rem;
            color: rgb(42,188,88);
            & > span {
              float: right;
              font-size: 2.5rem;
              & > {
                color: rgb(163,163,163);
                span {
                  font-size: 2.5rem;
                  color: rgb(0,192,59);
                  margin-right: .6rem;
                }
              }
            }
          }
          table {
            width: 100%;
            tr {
              font-size: 2.2rem;
              & > td {
                vertical-align: top;
                padding-bottom: 1rem;
              }
              td:first-child {
                width: 20%;
                text-align: justify;
                color: #00a379;
              }
              td:last-child {
                color: #666;
              }
            }
          }
        }
        .honour {
          display: flex;
          flex-direction: column;
          flex: 1;
          & > div {
            padding-bottom: 1rem;
          }
          & > div:last-child {
            position: relative;;
            &:before {
              position: absolute;
              content: ' ';
              border-bottom: 1px dashed gray;
              left: 0;
              right: 0;
              top: -.2rem;
            }
          }
          & > div:first-child {
            position: relative;
            &:after {
              position: absolute;
              content: ' ';
              border-bottom: 1px solid gray;
              left: 0;
              right: 0;
              bottom: .5rem;
            }
            display: flex;
            ul {
              flex: 1;
              height: 10rem;
              list-style: none;
              display: flex;
              li {
                flex: 1;
                text-align: center;
                span:first-child {
                  font-size: 3rem;
                  color: rgb(254,95,30);
                }
                span:last-child {
                  font-size: 2rem;
                  color: rgb(35,153,157);
                }
              }
            }
          }
          .item {
            display: flex;
            padding: 1rem;
            flex: 1;
            img {
              margin-right: 1rem;
            }
            div {
              font-size: 2.5rem;
              color: rgb(131,131,131)
            }
          }
        }
      }
      .photos {
        margin-top: 1rem;
        display: flex;

        & > div {
          width: 2rem;
          background: transparent;
        }
        ul {
          list-style: none;
          background: #FFF;
          display: flex;
          flex: 1;
          margin-bottom: 0;
          padding: 2rem;
          li {
            padding: 1rem;
            box-shadow: 1px 1px 1px 1px rgba(169, 169, 169, 0.43);
            border: 1px solid rgba(128, 128, 128, 0.5);
            margin: 1rem;
            flex: 1;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    &:nth-child(2) {
      width: 26%;
      margin: 0 0%;
    }
    & > a.title {
      height: 4.5rem;
      width: (4.5*(326/67))rem;
      display: block;
      margin: 0px auto 3rem;
      text-align: center;
      line-height: 4.5rem;
      font-size: 3.3rem;
      color: #FFF;
      &:hover, &:link, &:active {
        text-decoration: none;
      }
    }
    .news-board {
      background: #fff;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      .item {
        font-size: 3rem;
        color: rgb(251,85,85);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        flex: 1;
        margin-top: 1rem;
        position: relative;
        &:after {
          position: absolute;
          content: ' ';
          left: 0;
          right: 0;
          border-bottom: 1px dashed #607D8B;
          bottom: 0;
        }
        &:last-child:after {
          border-bottom: none;
        }
        span {
          font-size: 3rem;
          color: rgb(96,96,96);
        }
        p {
          font-size: 2.5rem;
          font-weight: 100;
          color: #666;
        }
      }
    }
    float: left;
  }

  .black-board {
    width: 100%;
    min-height: 50px;
    background-size: cover;
  }

}
